<template>
  <div class="wrap">
    <div class="content" v-loading="loading">
      <template v-if="data.orderStatus === 4">
        <el-alert
          :title="`${$t('order.cancelText')} ${data.cancelDate}`"
          type="warning"
          show-icon
          class="mgb10"
        >
        </el-alert>
      </template>
      <template
        v-if="data.orderStatus === 1 && data.shipping && !data.shipping.printShipping && data.shipping.bufferingDate"
      >
        <el-alert
          :title="`${data.shipping.bufferingDate} ${$t('order.printableShipmment')}`"
          type="warning"
          show-icon
          class="mgb10"
          style="background-color: #fef0f0;color: #f56c6c;"
        >
        </el-alert>
      </template>
      <div
        v-for="subOrder in data.subOrders"
        :key="subOrder.subOrderId"
        class="mgb10"
      >
        <el-alert
          :title="`${subOrder.goodsId}（${subOrder.num}）${$t('order.returnText')} ${subOrder.returnClosedTime || ''}`"
          v-if="subOrder.isReturn"
          type="warning"
          show-icon
        >
        </el-alert>
      </div>

      <!-- 订单信息 -->
      <div class="season">
        <el-row :gutter="24">
          <el-col :span="24">
            <h4 class="title">{{$t('order.Store and User Information')}}</h4>
            <el-card shadow="hover">
              <el-descriptions
                :column="1"
                size="medium"
                :labelStyle="{
                  width: '130px'
                }"
              >
                <el-descriptions-item :label="$t('order.Shop Name')" v-if="!order.isPacketOrder">
                  {{order.accountNickname}}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('order.Custom store name')" v-if="!order.isPacketOrder">
                  {{ data.accountRemarkName || '-' }}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('order.user name')">
                  {{ data.userAccount }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>

          <el-col :span="24" class="mgb20" >
            <h4 class="title">{{$t('order.Ordering Information')}}</h4>
            <order-item
              :order="data"
              :subPackageMaterialArr="subPackageMaterialArr"
              :tagPackageMaterialName="tagPackageMaterialName"
              :show-expand="true"
              :hidden-op="true"
            ></order-item>
          </el-col>

          <el-col class="mgb10" :span="8" v-if="data.orderStatus !== 1 && data.ignore === 0">
            <el-card shadow="hover">
              <el-descriptions
                :column="1"
                size="medium"
              >
                <el-descriptions-item :label="$t('order.Sticker fee') +'（' + $t('common.RMB') + '）'">
                  {{ data.settleOrder.spStickerPrice }}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('order.Continuation cost') +'（' + $t('common.RMB') + '）'">
                  {{ data.settleOrder.stickerAppend }}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('order.Special express delivery') +'（' + $t('common.RMB') + '）'">
                  {{ data.settleOrder.logisticTypePrice }}
                </el-descriptions-item>
                <el-descriptions-item :label="$t('order.Packaging Services') +'（' + $t('common.RMB') + '）'">
                  {{ data.settleOrder.packagePrice }}
                </el-descriptions-item>
              </el-descriptions>
              <hr>
              <el-descriptions
                :column="1"
                size="medium"
                labelClassName="fontOrange"
                contentClassName="fontOrange"
              >
                <el-descriptions-item :label="$t('table.sum') +'（' + $t('common.RMB') + '）'" label-style="width:102px">
                  {{ data.settleOrder.stickerPrice }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>

          <el-col class="mgb10" :span="8">
            <el-card shadow="hover">
              <el-descriptions
                :column="1"
                size="medium"
              >
                <template v-if="accountTypeNum === 6">
                  <el-descriptions-item :label="$t('order.Total amount of goods') + '($)'">
                    {{ data.amount }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="$t('order.Platform commission') + '($)'">
                    {{ data.salesFee }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="$t('order.Platform Freight') + '($)'">
                    {{ data.shippingFee }}
                  </el-descriptions-item>
                </template>

                <template v-else>
                  <el-descriptions-item :label="$t('order.Total amount of goods') + '(' + getCurrencySymbol() + ')'">
                    {{ data.amount }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="$t('order.Platform commission') + '(' + getCurrencySymbol() + ')'">
                    {{ data.salesFee }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="$t('order.Platform Freight') + '(' + getCurrencySymbol() + ')'">
                    {{ data.shippingFee }}
                  </el-descriptions-item>
                </template>

                <!--<el-descriptions-item v-if="data.accountType === 'Shein'" :label="$t('order.Total service fee') + '(' + getCurrencySymbol() + ')'">-->
                <!--  {{ data.serviceFee }}-->
                <!--</el-descriptions-item>-->
                <el-descriptions-item v-if="data.accountType === 'Shein'" :label="$t('order.Total amount of performance service fee') + '(' + getCurrencySymbol() + ')'">
                  {{ data.fulfilServiceFee }}
                </el-descriptions-item>

                <!--<el-descriptions-item v-if="data.accountType === 'Shein'" :label="$t('order.Estimated revenue') + '(' + getCurrencySymbol() + ')'">-->
                <!--  {{ data.expectedRevenue }}-->
                <!--</el-descriptions-item>-->
              </el-descriptions>
              <hr>
              <el-descriptions
                :column="1"
                size="medium"
                labelClassName="fontOrange"
                contentClassName="fontOrange"
              >
                <template v-if="accountTypeNum === 6">
                  <el-descriptions-item :label="$t('order.Total settlement amount') + '($)'">
                    {{ settlement }}
                  </el-descriptions-item>
                </template>

                <template v-else>
                  <el-descriptions-item :label="$t('order.Total settlement amount') + '(' + getCurrencySymbol() + ')'">
                    {{ settlement }}
                  </el-descriptions-item>
                </template>

              </el-descriptions>
            </el-card>
          </el-col>

          <template  v-if="isSetPackageMaterial || (order.acquiescePackageMaterialId > 0 && order.orderStatus === 1) || (order.acquiescePackageMaterialId > 0 && order.orderStatus === 6)">
            <el-tag
              type="danger"
              style="width: 500px; height: 100px; display: flex; align-items: center;"
            >
              <span style="font-size: 18px; font-weight: bold;color: black; margin: auto">{{$t('order.Please use')}}<span style="color: red">{{selectPackageMaterialStr}}</span>{{$t('order.pack')}}</span>
            </el-tag>
          </template>


        </el-row>
      </div>

      <template v-if="logisticsTrackingNumberData !== null && logisticsTrackingNumberData.length > 0">

        <div class="season">
          <el-row :gutter="24">
            <el-col :span="24">
              <h4 class="title">{{$t('order.Logistics Information')}}</h4>
            </el-col>
            <el-col :span="8" v-for="(item, index) in logisticsTrackingNumberData" :key="index">
              <el-card shadow="hover">
                <el-col class="left" :span="24">
                  <el-descriptions
                    :column="1"
                    contentClassName="descriptions-content-buyer"
                    :colon='false'
                  >
                    <template v-if="order.accountTypeNum === 7 && order.packetOrder.shippingType === 1">
                      <el-descriptions-item :label="`${$t('order.类型')}:`">
                        平台面单
                      </el-descriptions-item>
                    </template>
                    <template v-else>
                      <el-descriptions-item :label="`${$t('order.类型')}:`">
                        <template v-if="item.is_manual_operation === 1">
                          物流面单（手动）
                        </template>
                        <template v-else-if="item.is_manual_operation === 0">
                          物流面单（自动）
                        </template>
                        <template v-else>
                          平台面单
                        </template>
                      </el-descriptions-item>
                      <el-descriptions-item label="物流:">
                        {{item.logistics_type}}（{{item.tracking_number}}）
                      </el-descriptions-item>
                      <el-descriptions-item label="运费:" v-if="item.freight !== null">
                        <div v-html="item.freight"></div>
                      </el-descriptions-item>
                      <template v-if="item.is_manual_operation !== 1">
                        <el-descriptions-item label="打印面单时间:">
                          {{item.createTime}}
                        </el-descriptions-item>
                        <template v-if="item.isShowDeliveryTime === true">
                          <el-descriptions-item label="预计送达时间:">
                            {{item.deliveryTime}} ({{item.delivery_time}}小时)
                          </el-descriptions-item>
                        </template>
                      </template>
                      <template v-else>
                        <template v-if="!order.isSpecial">
                          <el-descriptions-item label="预计送达时间:" v-if="order.accountTypeNum === 1">
                            {{item.manual_recording_delivery_time}}
                          </el-descriptions-item>
                        </template>
                      </template>
                      <template v-if="item.is_manual_operation === 2 && item.isDateDroppedOff === true">
                        <el-descriptions-item label="揽件时间:">
                          <div v-html="item.dateDroppedOff"></div>
                        </el-descriptions-item>
                      </template>

                      <template v-if="item.trace !== null">
                        <br>
                        <el-descriptions-item>
                          <template v-if="item.traceInfo === false">
                            <div
                              v-for="(traceItem, traceIndex) in item.traceAbbreviate"
                              :key="traceIndex"
                              :style="{ color: traceIndex === 0 ? 'initial' : '#AAAAAA', position: 'relative', left: '-10px' }"
                            >
                              <template v-if="item.logistics_type === 'FedEx'">
                                <span>{{ traceItem.date }}</span>
                                <br>
                                <span v-if="traceItem.scanLocation['city'] !== null && traceItem.scanLocation['city'] !== false && traceItem.scanLocation['city'] !== undefined">【{{ traceItem.scanLocation['city'] }}】</span> <span>{{ traceItem.eventDescription }}</span>
                                <br>
                                <br>
                              </template>
                              <template v-else>
                                <span>{{ traceItem.latestStatusTime }}</span>
                                <br>
                                <span>{{ traceItem.locusDetailed }}</span>
                                <br>
                                <br>
                              </template>
                            </div>
                            <el-button type="text" @click="toggleDetails(index)" style="position: relative; left: -10px;">查看全部轨迹</el-button>
                          </template>
                          <template v-else>
                            <div
                              v-for="(traceItem, traceIndex) in item.trace"
                              :key="traceIndex"
                              :style="{ color: traceIndex === 0 ? 'initial' : '#AAAAAA', position: 'relative', left: '-10px' }"
                            >
                              <template v-if="item.logistics_type === 'FedEx'">
                                <span>{{ traceItem.date }}</span>
                                <br>
                                <span v-if="traceItem.scanLocation['city'] !== null && traceItem.scanLocation['city'] !== false && traceItem.scanLocation['city'] !== undefined">【{{ traceItem.scanLocation['city'] }}】</span> <span>{{ traceItem.eventDescription }}</span>
                                <br>
                                <br>
                              </template>
                              <template v-else>
                                <span>{{ traceItem.latestStatusTime }}</span>
                                <br>
                                <span>{{ traceItem.locusDetailed }}</span>
                                <br>
                                <br>
                              </template>
                            </div>
                            <el-button type="text" @click="toggleDetails(index)" style="position: relative; left: -10px;">收起</el-button>
                          </template>
                        </el-descriptions-item>
                      </template>
                    </template>
                  </el-descriptions>
                </el-col>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </template>

      <!--  买家信息   -->
      <div class="season" v-if="(order.accountTypeNum !== 7 && shipping) || (order.accountTypeNum === 7 && order.packetOrder.shippingType === 0 && shipping) || order.receivingInformationData !== null">
        <el-row>
          <el-col :span="24">
            <h4 class="title">{{$t('order.Buyer Information')}}</h4>
            <el-card shadow="hover">
              <el-col class="left" :span="24">
                <el-descriptions
                  :column="1"
                  contentClassName="descriptions-content-buyer"
                >
                  <template v-if="order.receivingInformationData !== null">
                    <el-descriptions-item label="receiver name`">
                      {{order.receivingInformationData.buyer_name}}
                    </el-descriptions-item>
                    <el-descriptions-item label="receiver phone">
                      {{order.receivingInformationData.buyer_phone}}
                    </el-descriptions-item>
                    <el-descriptions-item label="zip code">
                      {{order.receivingInformationData.buyer_postal_code}}
                    </el-descriptions-item>
                    <el-descriptions-item label="city">
                      {{order.receivingInformationData.buyer_city}}
                    </el-descriptions-item>
                    <el-descriptions-item label="state">
                      {{order.receivingInformationData.buyer_state}}
                    </el-descriptions-item>
                    <el-descriptions-item label="address">
                      {{order.receivingInformationData.buyer_address}}
                    </el-descriptions-item>
                  </template>
                  <template v-else-if="order.accountTypeNum === 1 && shipping && shipping.logisticMode === 'custom'">
                    <el-descriptions-item label="receiver name`">
                      {{shipping.receiverName}}
                    </el-descriptions-item>
                    <el-descriptions-item label="receiver phone">
                      {{shipping.receiverPhone}}
                    </el-descriptions-item>
                    <el-descriptions-item label="zip code">
                      {{shipping.zipCode}}
                    </el-descriptions-item>
                    <el-descriptions-item label="address line">
                      {{shipping.addressLine}}
                    </el-descriptions-item>
                    <el-descriptions-item label="comment">
                      {{shipping.comment}}
                    </el-descriptions-item>
                    <el-descriptions-item label="neighborhood">
                      {{shipping.neighborhood}}
                    </el-descriptions-item>
                    <el-descriptions-item label="city">
                      {{shipping.city}}
                    </el-descriptions-item>
                    <el-descriptions-item label="state">
                      {{shipping.state}}
                    </el-descriptions-item>
                    <el-descriptions-item label="address">
                      {{shipping.address}}
                    </el-descriptions-item>
                  </template>
                  <template v-else-if="order.accountTypeNum === 4 && order.performanceType === 2">
                    <el-descriptions-item label="receiver name`">
                      {{shipping.receiverName}}
                    </el-descriptions-item>
                    <el-descriptions-item label="receiver phone">
                      {{shipping.receiverPhone}}
                    </el-descriptions-item>
                    <el-descriptions-item label="zip code">
                      {{shipping.zipCode}}
                    </el-descriptions-item>
                    <el-descriptions-item label="city">
                      {{shipping.city}}
                    </el-descriptions-item>
                    <el-descriptions-item label="address">
                      {{shipping.address}}
                    </el-descriptions-item>
                  </template>
                  <template v-else-if="order.accountTypeNum === 7">
                    <el-descriptions-item label="receiver name`">
                      {{shipping.receiverName}}
                    </el-descriptions-item>
                    <el-descriptions-item label="receiver phone">
                      {{shipping.receiverPhone}}
                    </el-descriptions-item>
                    <el-descriptions-item label="zip code">
                      {{shipping.zipCode}}
                    </el-descriptions-item>
                    <el-descriptions-item label="city">
                      {{shipping.city}}
                    </el-descriptions-item>
                    <el-descriptions-item label="address">
                      {{shipping.address}}
                    </el-descriptions-item>
                  </template>
                  <template v-else>
                    <template v-if="shipping">
                      <el-descriptions-item :label="`${$t('order.Buyer')}`">
                        {{shipping.receiverName}}
                      </el-descriptions-item>
                      <el-descriptions-item :label="`${$t('order.address')}`">
                        {{shipping.address}}
                      </el-descriptions-item>
                      <el-descriptions-item label="电话" v-if="shipping.receiverPhone && false">
                        {{shipping.receiverPhone}}
                      </el-descriptions-item>
                    </template>
                  </template>
                </el-descriptions>
              </el-col>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 操作按钮 -->
      <div class="season" style="margin-top: 20px">
        <div class="">
          <el-button :type="order.accountTypeNum === 7 ? '' : 'info'" @click="goBack">{{ $t('common.back') }}</el-button>

          <template v-if="order.accountTypeNum === 7">
            <packet-to-stock-button
              :data="order"
              style="margin-left: 10px; margin-right: 10px;"
              @changeOrder="changeOrder"
            ></packet-to-stock-button>
          </template>

          <template v-if="order.accountTypeNum === 1">
            <el-button type="primary" @click="printShipping" :loading="printLoading" v-if="data.orderStatus === 1 && data.ignore === 0 && (data.shipping && data.shipping.printShipping && data.shipping.printExcept === 0)">{{$t('order.printShipping')}}</el-button>
            <el-button type="again" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0 && (order.shipping && order.shipping.status === 'ready_to_ship' && order.shipping.printExcept === 1)">{{$t('order.reprint')}}</el-button>

            <IntegratedLogisticsButton
              :order="order"
              :integratedLogisticsSettingData="integratedLogisticsSettingData"
              :defaultLogisticsType="defaultLogisticsType"
              @changeOrder="changeOrder"
              style="display: inline"
              class="mgl10"
            >
            </IntegratedLogisticsButton>

            <sticker-custom-button :order="data" style="display: inline" class="mgl10"></sticker-custom-button>
          </template>

          <template v-if="order.accountTypeNum === 4">
            <template v-if="order.shipping && order.shipping.shippingId">
              <!--<el-button type="primary" @click="batchOrderCreatePicking" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0 && order.performanceType === 1">{{ $t('order.printShipping') }}</el-button>-->

              <IntegratedLogisticsButton
                :order="order"
                :integratedLogisticsSettingData="integratedLogisticsSettingData"
                :defaultLogisticsType="defaultLogisticsType"
                @changeOrder="changeOrder"
                style="display: inline"
                class="mgl10"
              >
              </IntegratedLogisticsButton>

              <sticker-custom-button :order="data" style="display: inline" class="mgl10"></sticker-custom-button>

            </template>
          </template>

          <template v-if="order.accountTypeNum === 2 && false">
            <el-button type="primary" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{$t('order.printShipping')}}</el-button>
          </template>

          <template v-if="logisticsTrackingNumberData !== null">
            <template v-if="logisticsTrackingNumberData.is_manual_operation === 0">
              <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="data.orderStatus === 2 && data.ignore === 0 && (order.shipping && order.shipping.downShipping)">{{$t('order.downloadShipping')}}</el-button>
            </template>
          </template>
          <template v-else>
            <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="data.orderStatus === 2 && data.ignore === 0 && (order.shipping && order.shipping.downShipping)">{{$t('order.downloadShipping')}}</el-button>
          </template>

          <to-stock-button
            class="mgl10 mgr10"
            v-if="data.toStock === -1 && (data.orderStatus === 4 || data.orderStatus === 5)"
            :data="data"
            @changeOrder="getData"
          ></to-stock-button>

          <ignore-order :order-ids="[data.orderId]" :type="1" class="mgl10" v-if="order.orderStatus === 1 && order.ignore === 0" @changeOrder="getData"></ignore-order>

          <!--<template v-if="order.orderStatus > 1 && !order.ignore && !order.packageSettleOrderId">-->
          <!--  <el-button class="font-bold" type="danger" plain @click="addPackage(item)" v-for="(item, index) in packageMaterial" :key="index">-->
          <!--    {{$t('order.add')}}{{item.name}}({{item.price}}{{$t('setting.unit1')}})-->
          <!--  </el-button>-->
          <!--</template>-->

          <!--<template v-if="order.orderStatus > 1 && !order.ignore && order.packageSettleOrderId">-->
          <!--  <el-button class="font-bold" type="warning" plain @click="removePackage(order.packageMaterialName)">{{$t('order.Cancel')}}{{order.packageMaterialName}}({{order.packagePrice}}{{$t('setting.unit1')}})</el-button>-->
          <!--</template>-->

          <template v-if="order.orderStatus !== 1 && order.orderStatus !== 6 && !order.ignore">
            <el-button class="font-bold" type="warning" plain @click="openSavePackage()">{{$t('setting.Modified packaging service')}}</el-button>
          </template>

        </div>

      </div>
    </div>

    <el-dialog
      :title="$t('setting.SavePackageMaterialFun Tis One')"
      :visible.sync="savePackageLoading"
      width="500px"
      style="max-height: 800px;overflow-y: auto;"
    >
      <div class="mgb10">
        {{$t('setting.SavePackageMaterialFun Tis Three')}}
      </div>

      <div class="mgb10" v-for="(item_div_top, index_div_top) in copyPackageMaterialArr" :key="index_div_top">
        <div class="mgb10" v-for="(item_div, index_div) in item_div_top.numInfo" :key="index_div" style="border: 1px solid #e6ebf5; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <div class="mgb10 mgt10 mgl10">
            <span style="font-weight: bold;">SKU: {{item_div.sku}}</span>
          </div>
          <div class="mgb10 mgl10">
            <el-button class="font-bold" @click="addPackage(0, item_div, index_div_top)" style="font-size: 14px;width: 200px; text-align: left" :type="buttonType(0, item_div)" :plain="isPlain(0, item_div)">
              {{$t('setting.No packaging service')}}
            </el-button>
            <span style="color: gray; margin-left: 10px">{{acquiesceStr(0, item_div)}}</span>
          </div>
          <div class="mgb10 mgl10" v-for="(item, index) in packageMaterial" :key="index">
            <el-button class="font-bold" @click="addPackage(item, item_div, index_div_top)" style="font-size: 14px;width: 200px; text-align: left" :type="buttonType(item.id, item_div)" :plain="isPlain(item.id, item_div)">
              {{item.name}}({{item.price}}{{$t('setting.unit1')}})
            </el-button>
            <span style="color: gray; margin-left: 10px">{{acquiesceStr(item.id, item_div)}}</span>
          </div>
        </div>
      </div>

      <div class="mgt20">
        <span style="font-size: 13px">{{$t('setting.SavePackageMaterialFun Tis Six')}}</span>
      </div>
      <div>
        <span style="font-size: 13px">{{$t('setting.SavePackageMaterialFun Tis Four')}}</span>
      </div>
      <div>
        <span style="font-size: 13px">{{$t('setting.SavePackageMaterialFun Tis Five')}}</span>
      </div>
      <div>
        <span style="color: red; font-size: 13px">{{$t('setting.SavePackageMaterialFun Tis Two')}}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="savePackageLoading = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="savePackage" :loading="savePackageFormLoading" :disabled="disableButton">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import OrderItem from "@/views/order/components/OrderItem";
import {getCountryCurrency, getCountryIcon, getCurrencySymbol} from "@/utils/common";
import DeliverTag from "@/components/Tag/DeliverTag";
import StockTag from "@/components/Tag/StockTag";
import {
  addPackage, alterPackage,
  downLoadShipping, getFaOrderList,
  getOrder,
  getOrderList, getSiOrderList,
  printShipping,
  printShippingV2,
  removePackage
} from "@/api/order";
import StockButton from "@/views/order/components/StockButton";


import {deepCopy} from "@/utils";
import Order1688Tag from "@/components/Tag/Order1688Tag";

import StickerPackage from "@/views/order/components/stickerPackage.vue";
import ToStockButton from "@/views/order/components/ToStockButton.vue";
import IgnoreOrder from "@/views/order/components/IgnoreOrder.vue";
import StickerCustomButton from "@/views/order/components/StickerCustomButton.vue";
import IntegratedLogisticsButton from "@/views/order/components/IntegratedLogisticsButton.vue";
import PacketToStockButton from "@/views/order/components/PacketToStockButton.vue";

export default {
  name: "orderInfo",
  components: {
    StickerCustomButton,
    IntegratedLogisticsButton,
    IgnoreOrder,
    ToStockButton,
    OrderItem,
    PacketToStockButton
  },
  computed:{
    settlement(){
      let amount = this.data.amount || 0;
      let salesFee = this.data.salesFee || 0;
      let shippingFee = this.data.shippingFee || 0;
      let fulfilServiceFee = this.data.fulfilServiceFee || 0;
      let settlement = this.$cal.accSub(amount,salesFee);
      settlement = this.$cal.accSub(settlement,shippingFee);
      settlement = this.$cal.accSub(settlement,fulfilServiceFee);
      return settlement;
    },
    disableButton(){
      return JSON.stringify(this.copyPackageMaterialArr) === JSON.stringify(this.copyPackageMaterialArrTwo)
    }
  },
  data(){
    return {
      getCountryIcon,
      data: {
        subOrders: [],
      },

      orderId: '',
      order: {},
      shipping: {},
      logisticsTrackingNumberData: {},
      integratedLogisticsSettingData: [],
      defaultLogisticsType: '',
      packageMaterial: [],
      printLoading: false,
      accountTypeNum: 1,
      loading: false,
      savePackageLoading: false,
      savePackageFormLoading: false,
      //默认的包材id
      acquiescePackageMaterialId: 0,
      //已经选择的包材id
      selectPackageMaterialId: 0,
      selectPackageMaterialName: 0,
      packageMaterialArr:[],
      copyPackageMaterialArr:[],
      copyPackageMaterialArrTwo:[],
      isSetPackageMaterial:false,
      selectPackageMaterialStr:'',
      subPackageMaterialArr:[],
      tagPackageMaterialName:'',
    }
  },
  mounted() {
    this.setQueryParams()
  },
  created() {

  },
  methods:{
    getCurrencySymbol,
    getCountryCurrency,
    setQueryParams(){
      this.orderId = this.$route.query.orderId
      this.accountTypeNum = Number(this.$route.query.accountTypeNum)
      if(!this.orderId || !this.accountTypeNum){
        this.$errorMessage(this.$t('common.页面参数缺失'))
        this.$router.push({
          name: 'orderList',
        })
        return;
      }
      this.getData();
    },
    // 获取表单数据
    getData(){
      this.loading = true
      getOrder(this.orderId,{
        accountTypeNum: this.accountTypeNum,
      })
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.order = this.data

          this.shipping = res.info.shipping;
          this.logisticsTrackingNumberData = res.info.logisticsTrackingNumberData;
          this.packageMaterial = res.info.packageMaterial;
          this.integratedLogisticsSettingData = res.info.integratedLogisticsSettingData;
          this.defaultLogisticsType = res.info.defaultLogisticsType

          this.acquiescePackageMaterialId = res.data.acquiescePackageMaterialId
          this.selectPackageMaterialId =  res.data.packageMaterialId
          this.selectPackageMaterialName =  res.data.packageMaterialName

          this.getPackageMaterialArr(res)

        })
    },
    getPackageMaterialArr(res){
      //计算包材显示数据
      this.packageMaterialArr = [];
      this.isSetPackageMaterial = false
      this.selectPackageMaterialStr = ''

      if (res.data.packageMaterialInfo !== undefined && res.data.packageMaterialInfo !== null && res.data.packageMaterialInfo.length > 0) {
        this.isSetPackageMaterial = true
        this.packageMaterialArr = res.data.packageMaterialInfo
      } else {
        res.data.subOrders.forEach((row, index) => {
          let numInfo = [];
          let selectPackageMaterialName = '';
          if ((res.data.acquiescePackageMaterialId > 0 && res.data.orderStatus === 1) || (res.data.acquiescePackageMaterialId > 0 && res.data.orderStatus === 6)) {
            if (row.packageMaterialData.name !== null) {
              selectPackageMaterialName = row.packageMaterialData.name
            }
          }
          for (let i = 0; i < row.num; i++) {

            let skuPackageMaterialInfo = {
              //用户设置包材id
              'acquiescePackageMaterialId' : row.packageMaterialData.package_material_id,
              'sku' : row.sku,
              'selectPackageMaterialId' : '',
              'selectPackageMaterialName' : selectPackageMaterialName,
              'number' : i + 1,
            }
            numInfo.push(skuPackageMaterialInfo)
          }

          let skuPackageMaterial = {
            'sku' : row.sku,
            'num' : row.num,
            'index' : index,
            'numInfo' : numInfo,
          }
          this.packageMaterialArr.push(skuPackageMaterial)
        })
      }

      let StrArr = []
      let subPackageTag = []
      this.packageMaterialArr.forEach((row) => {
        if (Array.isArray(row.numInfo)) {
          let map = new Map();
          row.numInfo.forEach((rowItem) =>{
            if (map.has(rowItem.selectPackageMaterialName)) {
              map.set(rowItem.selectPackageMaterialName, map.get(rowItem.selectPackageMaterialName) + 1);
            } else {
              map.set(rowItem.selectPackageMaterialName, 1);
            }
            StrArr.push(rowItem.selectPackageMaterialName);
          })
          for (const [i, v] of map.entries()) {
            if (i !== '') {
              let subPackageTagItem = {}
              subPackageTagItem['sku'] = row.sku
              if (v > 1) {
                subPackageTagItem['tagTitle'] = i + 'x' + v
              } else {
                subPackageTagItem['tagTitle'] = i
              }
              this.tagPackageMaterialName = i
              subPackageTagItem['tagTitleInfo'] = i
              let index = this.packageMaterial.findIndex(obj => obj.name === i);
              subPackageTagItem['tagTitleInfoNum'] = index + 1
              subPackageTagItem['skuIndex'] = row.index
              subPackageTag.push(subPackageTagItem)
            }
          }
        }
      })

      this.subPackageMaterialArr = subPackageTag

      this.subPackageMaterialArr.sort((a, b) => a.tagTitleInfoNum - b.tagTitleInfoNum);

      let uniqueStrArr = [...new Set(StrArr)];
      uniqueStrArr.forEach((row) => {
        if (row !== '') {
          if (this.selectPackageMaterialStr === '') {
            this.selectPackageMaterialStr = row
          } else {
            this.selectPackageMaterialStr = this.selectPackageMaterialStr + '、' + row
          }
        }
      })
    },
    // 打印面单
    printShipping(){
      this.printLoading = true;
      printShippingV2(this.order.orderId)
        .then(res=>{
          this.printLoading = false;
          console.log(res)
          if(res.headers['content-type'].match(/application\/pdf/) && res.status === 200){
            this.printLoading = false;
            const pdfFile = window.URL.createObjectURL(
              new Blob([res.data], { type: "application/pdf" })
            );
            // 跳转页面预览
            window.open(pdfFile);
            // 60秒后释放
            setTimeout(()=>{
              URL.revokeObjectURL(pdfFile); //释放URL对象
            },60000)

            this.$emit('changeOrder',this.order.orderId)
          }else{
            if (res.headers['content-type'].match(/application\/json/)){

              // 创建一个FileReader对象
              const reader = new FileReader();

              // 定义一个回调函数，处理读取完成后的操作
              reader.onload = (event) => {
                // event.target.result 包含了Blob对象的内容作为字符串
                let blobAsText = event.target.result;

                // 在这里，你可以处理blobAsText，比如将其显示在页面上或执行其他操作
                const data = JSON.parse(blobAsText);
                if(data.error === 210){
                  this.$message({
                    showClose: true,
                    message: data.message,
                    type: 'error',
                    duration: 6000,
                  });
                }else{
                  this.$errorMessage('服务繁忙请稍后再试');
                  return;
                }
              };

              // 开始读取Blob对象并以文本形式返回

              reader.readAsText(res.data);
            }else{
              this.$errorMessage('服务繁忙请稍后再试');
              return;
            }
          }
        })
    },
    // 下载面单
    downLoadShipping(){
      this.printLoading = true
      const postData = {
        orderIds: [this.orderId],
        accountTypeNum: this.order.accountTypeNum,
      }
      downLoadShipping(postData)
        .then(res=>{
          this.printLoading = false;
          if(res.type === 'application/json'){
            this.$errorMessage('服务繁忙请稍后再试');
            return;
          }

          this.printLoading = false;
          const pdfFile = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/pdf" })
          );
          // 跳转页面预览
          window.open(pdfFile);
          // 60秒后释放
          setTimeout(()=>{
            URL.revokeObjectURL(pdfFile); //释放URL对象
          },60000)
        })
    },

    // 返回上一页
    goBack(){
      this.$router.go(-1);
      return;
    },
    changeOrder(){
      this.$router.go(0) // 刷新当前页面
    },
    addPackage(item, item_div, index_div_top){
      const idToFind = item_div.sku

      let objToFind = false
      //sku为空的情况
      if (idToFind === '') {
        objToFind = this.copyPackageMaterialArr[index_div_top];
      } else {
        objToFind = this.copyPackageMaterialArr.find(obj => obj.sku === idToFind);
      }

      if (objToFind) {
        const idToFindItem = item_div.number

        const objToFindItem = objToFind.numInfo.find(obj => obj.number === idToFindItem);
        if (item === 0) {
          objToFindItem.selectPackageMaterialId = ''
          objToFindItem.selectPackageMaterialName = ''
        } else {
          objToFindItem.selectPackageMaterialId = item.id
          objToFindItem.selectPackageMaterialName = item.name
        }
      }
      this.copyPackageMaterialArr.map(obj => obj.sku === idToFind ? obj : obj);
    },
    openSavePackage(){
      this.savePackageLoading = true
      this.copyPackageMaterialArr = deepCopy(this.packageMaterialArr);
      this.copyPackageMaterialArrTwo = deepCopy(this.packageMaterialArr);
    },
    savePackage(){
      this.$confirm(this.$t('order.savePackMTextOne'),this.$t('order.save')+'?')
        .then(()=>{
          this.savePackageFormLoading = true
          alterPackage({
            orderId: this.orderId,
            accountTypeNum: this.accountTypeNum,
            packageMaterialArr: this.copyPackageMaterialArr,
            packageSettleOrderId: this.order.packageSettleOrderId
          })
            .then(res=>{
              this.savePackageFormLoading = false
              if(res.error === 0){
                this.savePackageLoading = false
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        }).catch(res=>{
        // 点击了取消
      });
    },
    buttonType(val, itemInfo) {
      if (val === 0 && itemInfo.selectPackageMaterialId === '') {
        return "primary";
      } else if (val === itemInfo.selectPackageMaterialId) {
        return "primary";
      } else if (val === itemInfo.acquiescePackageMaterialId) {
        return "danger";
      } else {
        return "";
      }
    },
    isPlain(val, itemInfo) {
      if (val === 0 && itemInfo.selectPackageMaterialId === '') {
        return false
      } else if (val === itemInfo.selectPackageMaterialId) {
        return false
      } else if (val === itemInfo.acquiescePackageMaterialId) {
        return true
      } else {
        return false
      }
    },
    acquiesceStr(val, itemInfo) {
      if (val === itemInfo.acquiescePackageMaterialId) {
        return '*' + this.$t('setting.User selection')
      } else {
        return ''
      }
    },
    toggleDetails(index) {
      this.$set(this.logisticsTrackingNumberData[index], 'traceInfo', !this.logisticsTrackingNumberData[index].traceInfo);
    },
  }
}
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{

  }
}

</style>

<style lang="less">
.channel-form{
  &.el-form{
    .el-form-item__label{
      word-break: break-word;
    }
  }
}
.channel-box-card{
  .el-card__header{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 26px;
  }
  .el-card__body{
    padding: 0;
  }
}
.season{
  .shop-user-info{
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .shop-user-text{
    font-size: 12px;
    color: #FF0000;
  }
  .card-order-info{
    .order-header{
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

}
.descriptions-content{
  font-weight: bold;
}
.order-content{
  .header{
    font-size: 13px;

    display: flex;
    justify-content: space-between;
    .order-no{
      display: inline-block;
      font-weight: bold;
      margin-left: 20px;
    }
  }
  .order-goods-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    .goods-id{
      font-weight: 650;
      font-style: normal;
      font-size: 13px;
      color: #555555;
    }
    .goods-title{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #AAAAAA;
    }
    .goods-SKU{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #555555;
    }
    .goods-SKU-info{
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      color: #7F7F7F;
    }

  }
  .goods-price{
    .price-item{
      margin-bottom: 3px;
      font-size: 13px;
      .currency{
        font-weight: 500;
        font-style: normal;
        color: #AAAAAA;
        margin-right: 10px;
      }
      .price{
        color: #009C46;
        font-weight: 500;
        font-style: normal;
      }
    }
  }
  .goods-num{
    font-size: 13px;
    .text{
      color: #AAAAAA;
      font-weight: 500;
      font-style: normal;
    }
    .num{
      color: #FC6347;
      font-weight: 500;
      font-style: normal;
    }
  }
}

.card-goods-origin{
  position: relative;
  font-size: 13px;
  .card-tag{
    position: absolute;
    right: 0;
    top: 0;
  }
  .goods-origin-header{
    margin-bottom: 10px;
    .title{
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
    }
  }
  .goods-origin-content{
    .goods-info{
      display: inline-block;
      .goods-title{
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        color: #AAAAAA;
      }
      .goods-listing{
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
      }
    }
    .logistics{
      margin-top: 20px;
      p{
        margin: 0;
        padding: 0;
      }
      .logistics-item{
        margin-bottom: 10px;
        .time{
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #AAAAAA;
          margin-bottom: 5px;
        }
        .text{
          font-size: 14px;
          font-weight: 400;
          font-style: normal;
        }
      }
    }
  }
}
.mgr10{
  margin-right: 10px;
}
.mgr20{
  margin-right: 20px;
}
.fontOrange{
  color: #FC6347;
  font-weight: bold;
}
.goods-box{
  display: flex;
  .goods-image{
    height: 50px;
    width: 50px;
    margin-right: 20px;
  }
  .goods-title{
    width: 70%;

    .title{
      font-weight: 500;
      font-style: normal;
      font-size: 13px;
      color: #AAAAAA;
    }
    .listing{
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
    }
  }
}
.stock-tips{
  font-weight: 650;
  font-style: normal;
  font-size: 12px;
  color: #FF0000
}
.remark-input{

}
.remark-button{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.remark-card{
  //min-height: 100px;
}
.order-content{
  .item{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
    display: flex;
    margin: 5px 0;
    .checkbox{
      text-align: center;
      width: 50px;
      line-height: 100px;
    }
    .expand{
      position: relative;
      color: #666;
      font-size: 12px;
      width: 20px;
      height: 20px;
      text-align: center;
      margin-right: 3px;
      top: 43px;
      cursor: pointer;
    }
    .expand--active{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      left: -2px;
    }
    .img{
      width: 100px;
      height: 100px;
    }
    .center{
      text-align: center;
    }
    .goods-info{
      line-height: 20px;
      width: 600px;
      .listing{
        font-weight: 650;
        font-size: 13px;
        color: #555555;
      }
      .title{
        font-weight: 500;
        color: #AAAAAA;
      }
      .skuId{
        font-weight: 500;
        color: #555555;
      }
      .sku{
        font-weight: 400;
        color: #7F7F7F;
      }
    }
    .img-box{
      width: 90px;
      height: 90px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 3px;
      background-color: #eee;
      border-radius: 5px;

      img{
        width: 40px;
        height: 40px;
      }
    }
    .img-one {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      img{
        width: 80px;
        height: 80px;
      }
    }
    .price{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 500;
      p{
        margin: 5px auto;
      }
      .currency{
        color: #AAAAAA;
      }
      .price-num{
        color: #009C46;
      }
    }
    .num{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 600;
      .text{
        color: #AAAAAA;
      }
      .number{
        color: #FC6347;
      }
    }
    .operate{
      margin-left: auto;
      min-width: 300px;
      line-height: 100px;
      text-align: right;
    }
    .is-right{
      text-align: right;
    }
  }
}
</style>
